<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> ts一夜速成 从零到一 </title>
</head>
<body>
</body>
</html>
<script>
//https://juejin.cn/post/6952437673839558664  补充博客         
//他们想把你埋了，可你是一粒种子   
//21.05.10.夜 补充  

    // 依赖node平台  node -v查看
    // 全局安装ts    npm install typescript -g
    // 编译文件      tsc XXX.ts  
    // 约定文件后缀为.ts 编写react时(因为里面有jsx) 以.tsx为后缀 
    
    //TypeScript最大的一个特点就是变量是强类型的(即定义变量要指定标识符的类型)
    //var/let/const标识符：数据类型 = 赋值 
    //在声明变量的时候，我们必须给他一个类型。比如：字符串、数字、布尔，枚举........的声明类型。

    //TypeScript中的数据类型有：
        // Undefined :
        // Number: 数值类型;  NaN Infinity
        // string :字符串类型;
        // Boolean:布尔类型；

        // enum：  枚举类型 Ts新增类型
        // any :   任意类型，  一个牛X的类型；
        // void：  空类型； 没有值   可以表示变量 也可以表示函数无返回值  
        // never:  表示永不存在的值 不能是任何值 
        // Array : 数组类型 任意js数组 
        // Tuple : 元祖类型 Ts新增类型 固定长度数组 
        // Null ： 空类型
        // unknown 类型安全的any 
//___________________________________________________________________________________________________________________________________
// Undefined js中当你定义了一个变量，但没有给他赋予任何值的时候，他就是Undefined类型。
//           这可能和你以前学的语言稍有不同，其他语言会有个类型的默认值
        //声明数值类型的变量age，但不予赋值
        var age:number
        console.log(age)  //undefined

//___________________________________________________________________________________________________________________________________
// Number类型 
        //在ts中所有的数字都是number类型,含整数&小数,
        var age:number = 18
        var stature:number = 178.5
        console.log(age)        //18
        console.log(stature)    //178.5     
  //!注意 在TypeScrip中有几种特殊的Number类型 
        // 1--NaN：是Not a Number的简写，意思就是不是一个数值。如果一个计算结果或者函数的返回值本应该是数值，
        //         但是由于种种原因，他不是数字。出现这种状况不会报错，而是把它的结果看成了NaN
        // 2--Infinity 正无穷大。
        // 3--Infinity 负无穷大。

//___________________________________________________________________________________________________________________________________
// String字符串
        //由单引号或者双引号括起来的一串字符就是字符串 `繁引号 `
        var jspang:string = "技术胖 jspang.com"
        console.log(jspang)  //技术胖 jspang.com

//______________________________________________________________________________________________________________________________
// Boolean布尔类型
        //作任何业务逻辑判断都要有布尔类型的参与，通过对与错的判断是最直观的逻辑处理。
        //boolean类型只有两种值，true和false。
        var b:boolean = true
        var c:boolean = false

 //______________________________________________________________________________________________________________________________
 //enum 枚举
        //枚举类型是ts为js扩展的一种类型，采用关键字enum定义，在原生的js上是没枚举类型的 
        //用于表示固定的几个取值   (用于取值被限定在一定范围内的场景)
        //枚举成员会被赋值为 从0开始递增的数字 同时也会被枚举值到枚举名进行反向映射 
          //比如：
          //enum Days{sun,mon,tue,wed,thu,sat}
          //一年的季节：春、夏、秋、冬   //世界上人的类型：男人、女人、中性       
          //这种变量的结果是固定的几个数据时，就是我们使用枚举类型的最好时机
          
        enum REN{ nan , nv ,yao}
        console.log(REN.yao)  //返回了2，这是索引index，跟数组很像。
        //想给这些枚举赋值，可以直接使用=,来进行赋值。
            enum REN{
                 nan = '男',
                 nv = '女',
                 yao = '妖'
             }
            console.log(REN.yao)  //返回了妖 这个字

        //定义
        enum Gender{
                 Male=0,
                 Femal=1
         }    
        //简写
        enum Gender{
                 Male,
                 Femal
         }               //定义了一个名叫Gender的枚举类型，这个枚举类型的取值有两个，分别是Male，Femal        
        //使用l
        //let val:Gender;  //定义了一个名为val的变量，这个变量中只能保存Male或Femal；
        // val = Gender.Male;
        // val = Gender.Femal;
        // console.log(Gender)   //{ '0': 'Male', '1': 'Femal', Male: 0, Femal: 1 }
           //val = "nan"  //报错
           //val = "false"//报错

        //注意ts中的枚举地层实现的本质其实就是数值类型，所以赋值一个数值不会报错 
        // val = 666      //不会报错
        // console.log(Gender.Male)   //0
        // console.log(Gender.Femal)  //1

        // 注意ts中的枚举类型的取值，默认是由上至下 从0开始递增的
        // 虽然默认是从零开始递增的，但是我们可以手动的指定枚举类型取值的值
        // 如果手动指定了前面枚举类型的取值，那么后面枚举值的取值会根据前面的值递增
        // console.log(Gender.Male)   //6
        // console.log(Gender.Femal)  //7
        
        //注意 如果手动指定了后面枚举值的取值，那么前面枚举值的取值不会受到影响
        // console.log(Gender.Male)    //0
        // console.log(Gender.Femal)   //6

        //注意 我们还可以同修改多个枚举值的取值，如果同时修改了多个，那么修改的是声明最后就是什么
        // console.log(Gender.Male)    //8
        // console.log(Gender.Femal)   //6

        // 可以通过对应的数据拿到他的枚举值
        // 通过枚举值拿到对应的数据 
        //  console.log(Gender.Male)//0
        //  console.log(Gender[0])  //Male

        //demo+
        //使用枚举可以定义一些有名字的数字常量 
        enum Days{
                sun,mon,tue,wed,thu,fri,sat
        }       //下标从零开始 依此类推累加 
        console.log(Days.sun)      //0
        console.log(Days.sat)      //6   
        console.log(Days)          //枚举类型会被编译成一个双向映射的对象 
        console.log(Days[0])       //sun  //通过索引取值 90

        
//______________________________________________________________________________________________________________________________
//any          
        //TypeScript一种特殊的类型any，用来表示准许赋值为任意类型
        //当不清楚某个值的具体类型时就用any，任何数据类型的值都可以赋值any
        
        //注意不要过多使用any，因为什么都是any，ts就又成js了,大兄弟儿啊！
        //比如我们在程序中不断变化着类型，又不想让程序报错，这时候就可以使用any了。
            var t:any =10 
            t = "jspang"     //可以
            t = true         //可以
            console.log(t)
        //声明一个变量为任意值之后，对他的任何操作返回的内容，的类型都是任意值 
        //变量如果在声明时，未指定其类型，那么它会被识别为任意值类型  
            var t2;          //没有赋值操作 会被认为任意值类型 ==var t2:any;
            t2 = 1;          //所有在下面赋值任意类型 都没问题的
            t2 = false;   


    

//______________________________________________________________________________________________________________________________

        //联合类型 
        //联合类型表示 取值可为多种类型中的一种 使用|分割每个类型    
        //只能访问联合类型内的所有类型里  共有的属性&方法 一定是共有的 
            var much:string|number = "hellow"  
            much = 10;
            console.log(much.length)     //不可以 再次赋值10时 number类型没有length
            console.log(much.toString());//可以 这个属性两者共有   

//______________________________________________________________________________________________________________________________
//void类型 
        //void与any证号相反，表示没有任何类型， 即他就俩取值(null & undefined)
        //一般用于函数的返回值  (即用来规定函数无返回值)
        //在ts中null和undefinde可以赋值给void类型 
        function text():void{
                console.log("hellow world");
        }
        text()
        let value:void;       //定义一个不可以保存任意类型的变量只能保存null & nundefined  
        value = 123;          //报错
        value = "一二三";     //报错
        value = false;        //报错
        //注意null & undefined是所有类型的子类型，所以我们可以将null & undefined赋值给任意类型 
        value = null;         //不报错
        value = undefined;    //不报错 
//______________________________________________________________________________________________________________________________
//never类型
        //表示的是那些永不存在值的类型,
        //一般用于抛出异常或根本不可能有返回值的函数
        // function demo():never {
                // throw new Error("报错了")
        // }
        //demo();
        //function demo2():never {
                // while(true){}
        // }
        //demo();

//______________________________________________________________________________________________________________________________
//object对象类型
        //let obj:object; //定义了一个只能保存对象的变量 
        //obj = 1;
        //obj = "123"
        //obj = true;
        // obj = {name:"老王",age:33};
        // console.log(obj)

//———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
// 数组&元组类型的变量声明 
// 1.整个数组类型一致的情况下 
        //1 Array<number>
        //需求：得定义一个数组 这个数组中将来只能存储数值类型的数据  
        let arr1:Array<number>;          //表示声明了一个名称arr1的数组，这个数组中将来只能够存储数值类型的数据 
        arr1 = [1,3,5]
        arr1 = ["1","2","5"]//报错  
        console.log(arr1)                //[ 1, 2, 3 ]

        //2 string[] (建议)
        //需求：得定义一个数组 这个数组中将来只能存储字符串类型的数据
        let arr2:string[];               //表示声明了一个名称arr2的数组，这个数组中将来只能够存储字符串类型的数据
        arr2 = ["1","2","3"]
        arr2 = [1,1,"3"] //报错 
        console.log(arr2)                //1,2,3

// 2.整个数组数据类型不一致的情况
        //联合类型声明数组(number | string)[] 
        var arr3:(number | string)[]     //表示声明一个arr3的数组，这个数组中可以存储数值类型&存储字符串类型的数据
        arr3 = [1,"二",3,"四"]
        arr3 = [1,"2",false] //报错
        console.log(arr3)                //1,二,3,四
     
// 3.自由任意类型元素的数组
        any[]
        var arr4:any[];                 //表示定义了一个名arr4的数组，这个数组将来可以存储任意类型的数据
        arr4 = [1,"二"，false];
        consoel.log(arr4)               //1,二,false      

// 4.严格限制类型和长度的元组数组 
        //ts中的元组类型其实就是数组类型的拓展，元素用于保存，定长定数据类型的数据
        //元组类型[string,number,boolean]
        let arr5:[string,number,boolean];//表示定义了一个名arr5的元组，这个元组中将来可以存储3个元素
                                         //第一必须是字符串，第二个必须是数值，第三个必须是布尔值
        arr5 = ["a",1,true];
        arr5 = ["a",1,false,true] //报错 超长了
        console.log(arr5)                 //a,1,true


//ts数组类型 
        //1 [类型+方括号]表示法  
        var arr:number[] = [1,2,3]
        var arr:string[] = ["1","2","3"]
        var arr:any[] = ["1",1,false]     //表示任意类型的数组 

        //2 数组泛型Array<elemType规定元素类型>表示法 
        var arrType1:Array<number> = [1,2,3]
        var arrType2:Array<string> = ["1","2","3"] 
        var arrType3:Array<any> = ["1",1,false]     //同上 

        //3 接口表示法    
        interface Istate{
                username：string,
                age:number
        }      
        interface Iarr {
                [index:number]:Istate
        }
        var arrType4:Iarr = [{uername:"王",age:20}]
        var arrType5:Array<Istate> = [{uername:"王",age:20}]
        var arrType6:Istate[] = [{uername:"王",age:20}]

//————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————



//类型别名
        //类型别名可以用来给一个类型起一个新名字   (或联合类型操作)
        //采用关键字 type 例如type Name = string|number 即Name表示可以设置字符串&数值类型 
        //也可采用type约束取值 只能是某些字符串中特定的一个 
        //例如 type EventNames = "click" | "scroll" | "mousemove"
        //var str:string|number = "10" //这是一个联合类型 
        type strType = string|number|Boolean;
        var str:strType = "10";
        str = 10    
        str = true


        //可以对于接口也采用类型别名 
        interface numchType1{
                name:string
        }
        interface muchType2{
                age:number
        }
        type muchType = numchType1|muchType2
        var obj:muchType = {name:"匿名"}
        var obj2:muchType = {age:10}
        var obj3:muchType = {name:"匿名",age:10}


        //限制字符串的选择 
        type sex = "男"|"女"
        function getSex(s:sex):string{
                return s
        }
        getSex("男")

        //类 限制数组的类型也是可以的 
        class Madam {
        name: string;
        age: number;
        }
        const xiaoJieJies: Madam[] = [
        { name: "刘英", age: 18 },
        { name: "谢大脚", age: 28 },
        ];

 
//ts 中的泛型  
        //定义函数 接口 类的时候 不预先指定具体类型 而是在使用的时候再指定类型的一种特性 维护性更高 
        //泛型用来帮助我们限定约束规范 
        //dmeo中没有确切定义返回值类型 运行的数组每一项都可以时任意类型  
        function createArray(length:number,value:any):Array<any>{
                let arr = []
                for(var i=0; i<length; i++){
                        arr[i] = value
                }
                return arr;
        }        
        createArray(3,1) 

        //使用泛型修改上面的代码  
        function createArray<T>(length:number,value:T):Array<T>{
                let arr = []
                for(var i=0; i<length; i++){
                        arr[i] = value
                }
                return arr;
        }        
        var strArry:string[] = createArray<string>(3,"1")   //规定返回值value为字符串  
        var numArray:number[] = createArray(3,1)            //不传时 进行反推值  

        //接口当中采用泛型  
        interface Icreate{
                <T>(name:string,value:T):Array<T>
        }
        let func:Icreate;
        func = function<T>(name:string,value:T):Array<T>{
                return []
        }
        var strArr:string[] = func("ahncsan","str")





















     


































</script>


































